<template>
  <div>
    <!--我的预约-->
    <content-header :title="routeItem.title"></content-header>
    <el-tabs v-model="activeName" class="xui-margin-vertical-sm">
      <el-tab-pane label="个人门票预约" name="tab1">
        <ul v-if="personalAppointList.length > 0" class="personal">
          <li v-for="(item, index) in personalAppointList" :key="index" class="xui-padding-lg xui-margin-bottom-md">
            <span class="num">{{index + 1}}</span>
            <div class="info xui-margin-left-md">
              <div>
                <span>预约日期：</span>
                <span>{{item.visitDate}}</span>
              </div>
              <!-- <div>
                <span>预约时间段：</span>
                <span>{{item.time}}</span>
              </div> -->
              <div>
                <span>参观者：</span>
                <span>{{item.name}}</span>
              </div>
              <div v-if="item.ticketId">
                <span>票号：</span>
                <span>{{item.ticketId}}</span>
              </div>
            </div>
            <div class="codeInfo">
              <img :src="item.code" />
              <qrcode v-if="item.ticketId" :id="`gr-qrcode-${index}`" :value="item.ticketId" tag='img' :options="{ size: 90 }">
              </qrcode>
              <!-- <span v-else class="status-prompt color-red">预约失败</span>               -->
              <el-button v-if="ticketStatus(item) == 'waiting'" plain @click="confirmAndCancel(index,'personalTicket')">取消预约</el-button>
              <span class="status-prompt" v-if="ticketStatus(item) == 'cancelled'">已取消</span>
              <span class="status-prompt color-darken-gray" v-if="ticketStatus(item) == 'finished'">已结束</span>
              <span class="status-prompt color-green" v-if="ticketStatus(item) == 'going'">正在进行</span>
              <span class="status-prompt color-red" v-if="ticketStatus(item) == 'failed'">预约失败</span>
            </div>
          </li>
          <el-pagination background layout="prev, pager, next" :total="Number(grAppointmentPage.count)" :page-size="10"
            class="xui-margin-top xui-text-center" @current-change="getPersonalAppointList" :current-page.sync="grAppointmentPage.index">
          </el-pagination>
        </ul>
        <p v-else>您还没有任何个人门票预约。</p>
      </el-tab-pane>
      <el-tab-pane label="团队门票预约" name="tab2">
        <ul v-if="groupAppointList.length >0" class="personal">
          <li v-for="(item, index) in groupAppointList" :key="index" class="xui-padding-lg xui-margin-bottom-md">
            <span class="num">{{index + 1}}</span>
            <div class="info xui-margin-left-md">
              <div>
                <span>预约日期：</span>
                <span>{{item.visitDate}}</span>
              </div>
              <div>
                <span>团队名称：</span>
                <span>{{item.groupName}}</span>
              </div>
              <div>
                <span>导游：</span>
                <span>{{item.guideName}}</span>
              </div>
              <div v-if="item.ticketId">
                <span>票号：</span>
                <span>{{item.ticketId}}</span>
              </div>
            </div>
            <div class="codeInfo">
              <img :src="item.code" />
              <qrcode v-if="item.ticketId" :id="`gr-qrcode-${index}`" :value="item.ticketId" tag='img' :options="{ size: 90 }">
              </qrcode>
              <!-- <span class="status-prompt color-red">预约失败</span> -->
              <el-button v-if="ticketStatus(item) == 'waiting'" plain @click="confirmAndCancel(index,'teamTicket')">取消预约</el-button>
              <span class="status-prompt" v-if="ticketStatus(item) == 'cancelled'">已取消</span>
              <span class="status-prompt color-darken-gray" v-if="ticketStatus(item) == 'finished'">已结束</span>
              <span class="status-prompt color-green" v-if="ticketStatus(item) == 'going'">正在进行</span>
              <span class="status-prompt color-red" v-if="ticketStatus(item) == 'failed'">预约失败</span>
            </div>
          </li>
          <el-pagination background layout="prev, pager, next" :total="Number(tdAppointmentPage.count)" :page-size="10"
            class="xui-margin-top xui-text-center" @current-change="getGroupAppointList" :current-page.sync="tdAppointmentPage.index">
          </el-pagination>
        </ul>
        <p v-else>您还没有任何团队门票预约。</p>
      </el-tab-pane>
      <el-tab-pane label="活动个人预约" name="tab3">
        <ul v-if="actList.length > 0" class="personal">
          <li v-for="(item, index) in actList" :key="index" class="xui-padding-lg xui-margin-bottom-md">
            <span class="num">{{index + 1}}</span>
            <div class="info xui-margin-left-md">
              <div>
                <span>预约日期：</span>
                <span>{{item.lecturedate}}</span>
              </div>
              <div>
                <span>预约时间段：</span>
                <span>{{item.startdate}} - {{item.enddate}}</span>
              </div>
              <div>
                <span>参观者：</span>
                <span>{{item.joinusername}}</span>
              </div>
              <div>
                <span>票号：</span>
                <span>{{item.ticketId}}</span>
              </div>
            </div>
            <div class="codeInfo">
              <router-link :to="{name:'study-appointment-detail',params:{id:item.vid}}" class="xui-margin-right-xl color-primary"
                style="text-decoration:underline">查看详情</router-link>
              <img :src="item.qrodeUrl" width="90" height="90" />
              <el-button v-if="item.state == 0" plain @click="confirmAndCancel(index,'personAct')">取消预约</el-button>
              <span class="status-prompt" v-if="item.state == 1">已取消</span>
              <span class="status-prompt color-darken-gray" v-if="item.state == 2">已参加</span>
              <span class="status-prompt color-darken-gray" v-if="item.state == 3">爽约</span>
            </div>
          </li>
          <el-pagination background layout="prev, pager, next" :total="Number(grActPage.count)" :page-size="10" class="xui-margin-top xui-text-center"
            @current-change="getMyActList" :current-page.sync="grActPage.index">
          </el-pagination>
        </ul>
        <p v-else>您还没有任何个人活动预约。</p>
        <!-- 分页组件 -->

      </el-tab-pane>
      <el-tab-pane label="活动团队预约" name="tab4">
        <ul v-if="groupActList.length > 0" class="personal">
          <li v-for="(item, index) in groupActList" :key="index" class="xui-padding-lg xui-margin-bottom-md">
            <span class="num">{{index + 1}}</span>
            <div class="info xui-margin-left-md">
              <div>
                <span>预约日期：</span>
                <span>{{item.lecturedate}}</span>
              </div>
              <div>
                <span>预约时间段：</span>
                <span>{{item.startdate}} - {{item.enddate}}</span>
              </div>
              <div>
                <span>活动名称：</span>
                <span>{{item.title}}</span>
              </div>
              <div>
                <span>联系人：</span>
                <span>{{item.contactname}}</span>
              </div>
              <div>
                <span>团队名称：</span>
                <span>{{item.teamname}}</span>
              </div>
              <div v-if="teamActStatus(item) == 'finished' || teamActStatus(item) == 'going' || teamActStatus(item) == 'notAttend'">
                <span>票号：</span>
                <span>{{item.ticketId}}</span>
              </div>
            </div>
            <div class="codeInfo">
              <router-link :to="{name:'study-appointment-detail',params:{id:item.vid}}" class="xui-margin-right-xl color-primary"
                style="text-decoration:underline">查看详情</router-link>
              <img v-if="item.qrodeUrl" :src="item.qrodeUrl" width="90" height:90 />
              <el-button v-if="item.state == 0" plain @click="confirmAndCancel(index,'teamAct')">取消预约</el-button>
              <span class="status-prompt" v-if="teamActStatus(item) == 'cancelled'">已取消</span>
              <span class="status-prompt color-darken-gray" v-if="teamActStatus(item) == 'finished'">已结束</span>
              <span class="status-prompt color-green" v-if="teamActStatus(item) == 'going'">正在进行</span>
              <span class="status-prompt color-red" v-if="teamActStatus(item) == 'failed'">预约失败</span>
              <span class="status-prompt" v-if="teamActStatus(item) == 'waiting'">等待审核</span>
              <span class="status-prompt color-red" v-if="teamActStatus(item) == 'notAttend'">未参加</span>
            </div>
          </li>
          <el-pagination background layout="prev, pager, next" :total="Number(tdActPage.count)" :page-size="10" class="xui-margin-top xui-text-center"
            @current-change="getTeamActList" :current-page.sync="tdActPage.index">
          </el-pagination>
        </ul>
        <p v-else>您还没有任何团队活动预约。</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import ContentHeader from "@/components/widge/content-header";
  import code from "@/assets/images/example/ewm.png";
  import {
    getPersonalAppoint,
    getPersonActList,
    cancelAppoint,
    getGroupAppointList,
    getMyActList
  } from "@/api/appointment";
  import {
    getTeamActList,
    cancelAct
  } from "@/api/act";
  import Qrcode from "@xkeshi/vue-qrcode";
  import {
    parseTime
  } from "@/utils";

  export default {
    components: {
      ContentHeader,
      qrcode: Qrcode
    },

    data() {
      return {
        activeName: "first",
        personalAppointList: [],
        groupAppointList: [],
        actList: [],
        groupActList: [],
        grActPage: {
          count: null,
          size: 10,
          index: 1
        },
        tdActPage: {
          count: null,
          size: 10,
          index: 1
        },
        grAppointmentPage: {
          count: null,
          size: 10,
          index: 1
        },
        tdAppointmentPage: {
          count: null,
          size: 10,
          index: 1
        }
      };
    },
    computed: {
      routeItem() {
        let routes = this.$store.getters.siteMap;
        let result;
        routes.forEach(route => {
          if (route.children) {
            route.children.forEach(child => {
              if (child.name == this.$route.name) {
                result = child;
              }
            });
          }
        });
        return result;
      },
      routePath() {
        return this.$route.path;
      },
      userId() {
        return this.$store.getters.userId;
      }
    },
    methods: {
      ticketStatus(order) {
        if (order.status == "预约失败") {
          return "failed";
        }
        if (order.statusId == "YQX") {
          return "cancelled";
        }
        if (order.statusId == "YYCG") {
          let now = parseTime(new Date(), "{y}-{m}-{d}");
          let visitData = order.visitDate;
          if (now > visitData) {
            return "finished";
          }
          if (now == visitData) {
            return "going";
          }
          if (now < visitData) {
            return "waiting";
          }
        }
      },
      teamActStatus(order) {
        if (order.state == 0) {
          return "waiting";
        }
        if (order.state == 2) {
          return "failed";
        }
        if (order.state == 3) {
          return "cancelled";
        }
        if (order.state == 5) {
          return "notAttend";
        }
        if (order.state == 1) {
          let now = parseTime(new Date(), "{y}-{m}-{d}");
          let visitData = order.lecturedate.trim();
          if (now > visitData) {
            return "finished";
          }
          if (now == visitData) {
            return "going";
          }
          if (now < visitData) {
            return "access";
          }
        }
      },
      getPersonalAppointList() {
        getPersonalAppoint(this.grAppointmentPage.index).then(res => {
          this.personalAppointList = res.data.records;
          this.grAppointmentPage.count = res.data.count;
        });
      },
      getGroupAppointList() {
        getGroupAppointList(this.tdAppointmentPage.index).then(res => {
          this.groupAppointList = res.data.records;
          this.tdAppointmentPage.count = res.data.count;
        });
      },
      getMyActList() {
        console.log(this.grActPage.index);
        getMyActList(this.userId, this.grActPage.index).then(res => {
          this.actList = res.data.recordsList;
          this.grActPage.count = res.data.count;
        });
      },
      getTeamActList() {
        getTeamActList(this.userId, this.tdActPage.index).then(res => {
          this.tdActPage.count = res.data.count;
          this.groupActList = res.data.recordsList;
        });
      },
      cancelPersonalAppoint(index) {
        let data = this.personalAppointList[index];
        cancelAppoint(data).then(res => {
          this.$message({
            showClose: true,
            type: "success",
            message: "已取消"
          });
          this.personalAppointList[index].status = "取消预约";
          this.personalAppointList[index].statusId = "YQX";
        });
      },
      cancelTeamAppoint(index) {
        let data = this.groupAppointList[index];
        cancelAppoint(data).then(res => {
          this.$message({
            showClose: true,
            type: "success",
            message: "已取消"
          });
          this.groupAppointList[index].status = "取消预约";
          this.groupAppointList[index].statusId = "YQX";
        });
      },
      cancelAct(index, type) {
        if (type == "person") {
          let act = this.actList[index];
          cancelAct(act.id, this.userId, type).then(res => {
            if (res.isSuccess == 1) {
              this.$message({
                showClose: true,
                type: "success",
                message: res.msg
              });
              this.actList[index].state = 1;
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
          });
        }
        if (type == "team") {
          let act = this.groupActList[index];
          cancelAct(act.id, this.userId, type).then(res => {
            if (res.isSuccess == 1) {
              this.$message({
                showClose: true,
                type: "success",
                message: "已取消"
              });
              this.groupActList[index].state = 3;
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg
              });
            }
          });
        }
      },
      confirmAndCancel(index, type) {
        this.$confirm("取消预约后将无法恢复，是否取消预约?", "请确认", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            switch (type) {
              case "personalTicket":
                this.cancelPersonalAppoint(index);
                break;
              case "teamTicket":
                this.cancelTeamAppoint(index);
                break;
              case "personAct":
                this.cancelAct(index, "person");
                break;
              case "teamAct":
                this.cancelAct(index, "team");
                break;
            }
          })
          .catch(() => {});
      },
      goToDefaultTab() {
        let tabIndex = this.$route.query.tab;
        this.activeName = Boolean(tabIndex) ? "tab" + tabIndex : "tab1";
      }
    },
    mounted() {
      this.getPersonalAppointList();
      this.getGroupAppointList();
      this.getMyActList();
      this.getTeamActList();
      this.goToDefaultTab();
    }
  };

</script>

<style lang="less" scoped>
  .personal {
    li {
      position: relative;
      border: 1px solid #bf9c51;
      background: url("../../../assets/images/example/triangule.png") no-repeat 0 0;

      .num {
        position: absolute;
        top: 0;
        color: #fff;
        margin-left: -23px;
        width: 18px;
        text-align: center;
      }

      .info {
        >div {
          padding: 3px 25px;
          background: url("../../../assets/images/example/icon.png") no-repeat 0 6px;

          span {
            font-family: 宋体;
          }
        }

        >div:nth-child(2) {
          background-position-y: -24px;
        }

        >div:nth-child(2) {
          background-position-y: -27px * 2;
        }

        >div:nth-child(3) {
          background-position-y: -28px * 3;
        }
      }

      .codeInfo {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;

        img {
          display: inline-block;
          vertical-align: middle;
          margin-right: 27px;
        }
      }
    }
  }

  .status-prompt {
    width: 98px;
    display: inline-block;
    text-align: center;
  }

</style>
